<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webSocket</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: white;
        }

        span {
            color: white;
        }

        #root #one {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: red;
        }

        #root #one #two {
            background-image: url("../仿红岩导航/img/nav-line.png") no-repeat;
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }

        #root #one #two #three {
            display: inline-block;
            width: 100px;
            margin-top: 20px;
            font-weight: bold;
            font-size: 20px;
        }

        #root #one #two #four {
            background-color: red;
            text-align: center;
            width: 100px;
        }

        #root #one #two #four li {
            margin-top: 10px;
        }

        #root #one #two:hover {
            background-image: url("../仿红岩导航/img/nav.png");
        }
    </style>
</head>

<body>
    <!-- 209000622  唐玉林 -->
    <div id="root">
        <ul id='one'>
            <li v-for='item in list' :key='item.id' id="two" @mouseover='flagChange(item)'
                @mouseout="flagChange1(item)">
                <!-- @mouseout="flagChange(item)" -->
                <a href="#" id="three">{{item.name}}</a>
                <span> {{item.english}}</span>

                <ul v-show='item.flag' id='four'>
                    <li v-for='item1 in item.sub' :key='item1.id'>
                        <a href="#" @click="info(item1.name)">{{item1.name}}</a>
                </ul>
            </li>
        </ul>
        </li>
        </ul>
    </div>
    <script>
        var id = 0;
        new Vue({
            el: '#root',
            data: {
                list: [
                    {
                        name: '首页',
                        english: "home",
                        id: ++id,
                    },
                    {
                        name: '关于红岩',
                        english: "HongYan",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '红岩文化', id: id + "1" },
                            { name: '博物馆机构', id: id + "2" },
                            { name: '历史沿革', id: id + "3" },
                        ]
                    },
                    {
                        name: '公告动态',
                        english: "Dynamics",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '文博信息', id: id + "1" },
                            { name: '政务平台', id: id + "2" },
                            { name: '公告', id: id + "3" },
                            { name: '专题报道', id: id + "4" }
                        ]
                    },
                    {
                        name: '馆藏精品',
                        english: "Collections",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '一级文物', id: id + "1" },
                            { name: '二级文物', id: id + "2" },
                            { name: '三级文物', id: id + "3" }
                        ]
                    },
                    {
                        name: '陈列展览',
                        english: "Exhibition",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '虚拟展览', id: id + "1" },
                            { name: '基本陈列', id: id + "2" },
                            { name: '复原陈列', id: id + "3" },
                            { name: '临时展览', id: id + "4" },
                            { name: '展览交流', id: id + "5" },
                        ]
                    },
                    {
                        name: '研究开发',
                        english: "Research",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '历史研究', id: id + "1" },
                            { name: '艺术创作', id: id + "2" },
                            { name: '影音在线', id: id + "3" },
                            { name: '文创产品', id: id + "4" },
                        ]
                    },
                    {
                        name: '公共教育',
                        english: "Education",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '党性教育', id: id + "1" },
                            { name: '爱国主义教育', id: id + "2" },
                            { name: '研学实践教育', id: id + "3" },
                            { name: '科普教育', id: id + "4" },
                        ]
                    },
                    {
                        name: '参观服务',
                        english: "Service",
                        id: ++id,
                        flag: false,
                        sub: [
                            { name: '景点介绍', id: id + "1" },
                            { name: '服务内容', id: id + "2" },
                            { name: '网上预约', id: id + "3" },
                            { name: '志愿服务', id: id + "4" },
                        ]
                    },
                    {
                        name: '网上预约',
                        english: "Reservation",
                        id: ++id,
                    },
                ]
            },
            methods: {
                flagChange: function (item) {
                    item.flag = !item.flag;
                },
                flagChange1: function (item) {
                    for (var number of this.list) {
                        if (item.name == number.name) {
                            number.flag = !number.flag;
                        }
                    }
                },
                info: function (value) {
                    console.log(value);
                }
            }
        })
    </script>
</body>

</html>